<template>
    <video v-if="postfix === 'mp4' || postfix === 'mov'" :controls="controls" :autoplay="autoplay" :preload="preload" :width="width" :height="height" controlslist='nodownload'>
        <source :src="playParam.play_url" />
        您的浏览器不支持 HTML5 video 标签,建议下载最新版谷歌浏览器使用。
    </video>
    <div v-else class="rewview-tips">
        <p>当前视频格式是：{{ postfix }}，不支持预览;</p>
        <p>提示：仅支持mp4和mov格式视频预览.</p>
    </div>
</template>
<script>
export default {
    props: {
        playParam: {
            type: Object,
            default () {
                return {};
            }
        },
        controls: {
            type: Boolean,
            default: true
        },
        autoplay: {
            type: Boolean,
            default: true
        },
        preload: {
            type: String,
            default: "auto"
        },
        width: {
            type: String,
            default: "100%"
        },
        height: {
            type: String,
            default: "100%"
        }
    },
    data() {
        return {
            postfix: ""
        };
    },
    mounted() {
        if (this.playParam) {
            let url = this.playParam.play_url;
            this.postfix = url.substring(url.length - 3).toLowerCase();
        }

    },
    beforeDestroy() {},
    methods: {}
};
</script>
<style lang="scss">
video {
    object-fit: fill;
    outline: none;
}

video::-internal-media-controls-download-button {
    display: none;
}
video::-webkit-media-controls {
    overflow: hidden !important;
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 48px);
    margin-left: auto;
}

.rewview-tips {
    text-align: center;
    height: 100%;
    font-size: 0;
    line-height: normal;
}
</style>